import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Col, Row, Space, notification } from 'antd';
import { useNavigate } from 'react-router-dom';
import "./PerfectDatas.scss"
import { useSelector } from 'react-redux';
import Index from '../../../../api/Inedx';
interface Props {

}
function PerfectDatas(props: Props) {
    let residentDetail = useSelector((state: any) => { return state.WTreducer })
    // console.log(residentDetail);
    let residentId = useSelector((state: any) => { return state.WTreducer.residentId })
    const [form] = Form.useForm();
    let navigate = useNavigate()
    let [marriage, setMarriage] = useState([])
    let [nation, setNation] = useState([])
    let [culture, setCulture] = useState([])
    let [userTag, setUseTag] = useState([])
    let getdatas = async () => {
        let res1 = await Index.Resident.GetNation()//获取民族列表
        let res2 = await Index.Resident.GetMarriage()//获取婚姻状态列表
        let res3 = await Index.Resident.GetCulture()//获取文化程度列表
        let res4 = await Index.Resident.GetUserTag()//获取居民标签列表
        // console.log(res1);
        // console.log(res2);
        // console.log(res3);
        // console.log(res4);
        let arr1 = res1.data.data.map((item: any) => {
            return { value: item.nationId, label: item.nationName }
        })
        let arr2 = res2.data.data.map((item: any) => {
            return { value: item.marriageId, label: item.marriageName }
        })
        let arr3 = res3.data.data.map((item: any) => {
            return { value: item.degreeId, label: item.degreeName }
        })
        let arr4 = res4.data.data.map((item: any) => {
            return { value: item.rtId, label: item.rtName }
        })

        setNation(arr1)
        setMarriage(arr2)
        setCulture(arr3)
        setUseTag(arr4)
    }
    useEffect(() => {
        getdatas()
        form.setFieldsValue(residentDetail)
    }, [])

    let onFinish = async (value: any) => {
        console.log(value);
        let res = await Index.Resident.PerfectResident({ residentId, ...value })
        console.log(res);
        if (res.data.code === "200") {
            notification.success({ message: res.data.message })
            navigate(-1)
        } else {
            notification.error({ message: "编辑失败!" })
        }

    }




    return (
        <div className='perfectDatas'>
            <div className='title'>完善档案信息</div>
            <div>
                <Form form={form} onFinish={(value) => { onFinish(value) }}>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <div className='title2'>居民信息</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Space><span>居民编号</span><span>{residentId}</span></Space>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentName"
                                label="姓名"
                                rules={[{ required: true, message: '请输入您的姓名' }]}
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentImg"
                                label="头像"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentNumber"
                                label="身份证号"
                                rules={[{ required: true, message: '请输入身份证号', pattern: /^(\d{18,18}|\d{15,15}|\d{17,17}x)/ }]}
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentPhone"
                                label="手机号码"
                                rules={[{ required: true, message: '请输入手机号', pattern: /^1[3456789]\d{9}$/ }]}
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="rtId"
                                label="居民标签"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={userTag}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={16}>
                            <Form.Item
                                name="residentNowAddress"
                                label="现居地"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentRegion"
                                label="行政区划"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={16}>
                            <Form.Item
                                name="residentOriginAddress"
                                label="户籍地址"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentGender"
                                label="性别"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={[
                                        { value: "男", label: '男' },
                                        { value: "女", label: "女" },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentBirth"
                                label="出生年月"
                            >
                                <Input placeholder="请选择日期" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentNativePlace"
                                label="籍贯"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="nationId"
                                label="民族"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={nation}
                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="degreeId"
                                label="文化程度"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={culture}
                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>

                            <Form.Item
                                name="marriageId"
                                label="婚姻状况"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={marriage}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentJob"
                                label="职业"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={16}>
                            <Form.Item
                                name="residentCompany"
                                label="工作单位"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentPassword"
                                label="登录密码"
                                rules={[{ required: true, message: '请输入8位以上的数字和字母组合', pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/ }]}
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="residentType"
                                label="户籍类型"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={[
                                        { value: "农村", label: '农村' },
                                        { value: "城镇", label: '城镇' },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="etId"
                                label="费用类型"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={[
                                        { value: 1, label: '自费' },
                                        { value: 2, label: '社会医疗保险' },
                                        { value: 3, label: '商业保险' },
                                        { value: 4, label: '新农合' },
                                        { value: 5, label: '其他' },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={16}>
                            <Form.Item
                                name="residentHospital"
                                label="定点医疗单位"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <div className='title3'>健康信息</div>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="healthHeight"
                                label="身高"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="healthWeight"
                                label="体重"
                            >
                                <Input placeholder="请输入" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="bloodId"
                                label="血型"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={[
                                        { value: 1, label: 'A型' },
                                        { value: 2, label: "B型" },
                                        { value: 3, label: 'O型' },
                                        { value: 4, label: 'AB型' },
                                        { value: 5, label: "不详" },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={8}>
                            <Form.Item
                                name="healthRh"
                                label="RH阴性"
                            >
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    options={[
                                        { value: "是", label: '是' },
                                        { value: "否", label: '否' },
                                        { value: "不详", label: "不详" },
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={[16, 16]}>
                        <Col className="gutter-row" span={10}>
                            <Form.Item
                                name="healthGuomin"
                                label="过敏史"
                            >
                                <Input placeholder="请输入过敏史,无请输无" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={10}>
                            <Form.Item
                                name="healthJiwang"
                                label="既往史"
                            >
                                <Input placeholder="请输入既往史,无请输无" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={10}>
                            <Form.Item
                                name="healthJiuzhen"
                                label="就诊史"
                            >
                                <Input placeholder="请输入就诊史,无请输无" />
                            </Form.Item>
                        </Col>
                        <Col className="gutter-row" span={10}>
                            <Form.Item
                                name="healthJiazu"
                                label="家族病史"
                            >
                                <Input placeholder="请输入家族病史,无请输无" />
                            </Form.Item>
                        </Col>
                    </Row>

                    <Form.Item>
                        <Space>
                            <Button type='primary' htmlType='submit'>保存</Button>
                            <Button onClick={() => { navigate(-1) }}>返回</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default PerfectDatas;